<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='角色管理'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<style>
    /*.footer{*/
    /*position: relative;*/
    /*}*/
</style>
<body>
<th:block layout:fragment="custom_content">
    <h2>角色管理</h2>
    <!--<el-button size="mini" type="primary" @click="handleAdd" style="margin-bottom: 20px;">添加角色</el-button>-->
    <el-table :data="tableData" v-loading.body="loading" stripe :row-class-name="rowClassName" style="width: 300px">
        <el-table-column type="index" label="序号" width="100px"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="100px"></el-table-column>
        <el-table-column label="操作">
            <template scope="scope">
                <!--<el-button size="mini" type="info" v-if="scope.row.roleName!='管理员'" @click="handleEdit(scope.row.id)">编辑</el-button>-->
                <el-button size="small" type="info" v-if="scope.row.roleName!='管理员'" @click="handleEditResource(scope.row.id)">配置资源</el-button>

                <!--<el-button size="mini" type="danger" v-if="scope.row.roleName!='管理员'" @click="handleDel(scope.row.id)">删除</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            layout="total, prev, pager, next"
            :total="total">
    </el-pagination>
    <el-dialog
            title="添加角色"
            :visible.sync="addDialogVisible"
            size="tiny"
            :before-close="handleAddClose" id="addDialog">
        <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" id="addForm">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="addForm.roleName"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleAddSave('addForm')">保存</el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="编辑"
            :visible.sync="editDialogVisible"
            size="tiny"
            id="editDialog">
        <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px" id="editForm">
            <el-form-item label="编号">
                <el-input v-model="editForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleName">
                <el-input v-model="editForm.roleName"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditSave('editForm')">保存</el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="配置资源"
            :visible.sync="editResourceDialogVisible"
            size="tiny"
            id="editResourceDialog">
        <el-form :model="editResourceForm" ref="editResourceForm" label-width="100px" id="editResourceForm">
            <el-tree
                    :data="resources"
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="defaultCheckedKeys"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editResourceDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditResouceSave('editForm')">保存</el-button>
        </div>
    </el-dialog>
    <el-dialog
            title="删除提示"
            :visible.sync="delDialogVisible"
            size="tiny">
        <span>确定删除该角色？</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleDelConfirm">确 定</el-button>
            </span>
    </el-dialog>

</th:block>
<th:block layout:fragment="javascript">
    <script>
        var listVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    sideActiveIndex: '2-2',
                    defaultCheckedKeys: [],
                    resources: [],
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    },
                    breadcrumbs:['系统管理','角色管理'],

                    tableData: [],
                    pageNum: 0,
                    total: 0,
                    delId: '',
                    loading: false,
                    editDialogVisible: false,
                    editResourceDialogVisible: false,
                    addDialogVisible: false,
                    delDialogVisible: false,
                    addForm: {
                        roleName: ''
                    },
                    addRules: {
                        roleName: [
                            {required: true, message: '请输入角色名称', trigger: ['blur', 'change']}
                        ]
                    },
                    editForm: {
                        id: '',
                        roleName: ''
                    },
                    editRules: {
                        roleName: [
                            {required: true, message: '请输入角色名称', trigger: ['blur', 'change']}
                        ]
                    },
                    editResourceForm: {
                        roleId: '',
                        resourceIds: []
                    },
                    isCollapse: false,
                    defaultIndex: '1',
                    menus: [],
                    regulationMenus: [],
                    deptTrees:[]

                }
            },
            methods: {
                handleCurrentChange: function (val) {
                    search('${val}');
                },
                rowClassName: function (row, rowIndex) {
                    //把每一行的索引放进row
                    row.index = rowIndex;
                },
                handleAddClose: function () {
                    listVue.addForm = {roleName: ''};
                },
                handleAddSave: function (formName) {
                    var $this = this;
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            $.ajax({
                                cache: true,
                                url: '/role/add',
                                type: 'POST',
                                data: JSON.stringify(listVue.addForm),
                                dataType: 'json',
                                contentType: 'application/json',
                                async: false,
                                success: function (data) {
                                    if (data.status == 1) {
                                        $this.$message('保存成功');
                                        listVue.addDialogVisible = false;
                                        listVue.addForm = {roleName: ''};
                                        search(listVue.pageNum);
                                        $this.$nextTick(function () {
                                            changeFooterHeight();
                                        })
                                    } else {
                                        $this.$message.error(data.msg);
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
                handleEditSave: function (formName) {
                    var $this = this;
                    this.$refs[formName].validate(function (valid) {
                        if (valid) {
                            $.ajax({
                                cache: true,
                                url: '/role/edit',
                                type: 'POST',
                                data: JSON.stringify(listVue.editForm),
                                dataType: 'json',
                                contentType: 'application/json',
                                async: false,
                                success: function (data) {
                                    if (data.status == 1) {
                                        $this.$message('更新成功');
                                        listVue.editDialogVisible = false;
                                        listVue.editForm = {id: '', roleName: ''};
                                        search(listVue.pageNum);
                                        $this.$nextTick(function () {
                                            changeFooterHeight();
                                        })
                                    } else {
                                        $this.$message.error(data.msg);
                                    }
                                }
                            });
                        } else {
                            return false;
                        }
                    });

                },
                handleEditResouceSave: function (formName) {
                    var $this = this;
                    this.editResourceForm.resourceIds = this.getCheckedKeys();

                    $.ajax({
                        cache: true,
                        url: '/role/resource/edit',
                        type: 'POST',
                        data: JSON.stringify(listVue.editResourceForm),
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                $this.$message('更新成功');
                                listVue.editResourceDialogVisible = false;
                                listVue.editResourceForm = {roleId: '', resourceIds: []};
                                listVue.resetChecked();
                                listVue.resources = [];
                                search(listVue.pageNum);
                                $this.$nextTick(function () {
                                    changeFooterHeight();
                                })
                            } else {
                                $this.$message.error(data.msg);
                            }
                        }
                    });
                },
                handleDelConfirm: function () {
                    listVue.delDialogVisible = false;
                    var $this = this;
                    $.ajax({
                        cache: true,
                        url: '/role/delete',
                        type: 'GET',
                        data: {roleId: listVue.delId},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                $this.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                });
                                if ((listVue.total - 1) % 10 == 0) {
                                    listVue.pageNum = listVue.pageNum - 1;
                                }
                                search(1);
                                $this.$nextTick(function () {
                                    changeFooterHeight();
                                })
                            }
                        }
                    });
                },
                handleEdit: function (id) {
                    $.ajax({
                        cache: true,
                        url: '/role/edit',
                        type: 'GET',
                        data: {roleId: id},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                listVue.editForm = data.value;
                                listVue.editDialogVisible = true;
                            }
                        }
                    });
                },
                handleEditResource: function (id) {
                    var $this = this;
                    $.ajax({
                        cache: true,
                        url: '/role/resource/edit?newDate='+Math.random(),
                        type: 'GET',
                        data: {roleId: id},
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function (data) {
                            if (data.status == 1) {
                                listVue.editResourceForm.resourceIds = data.value.resourceIds;
                                listVue.editResourceForm.roleId = id;
                                listVue.resources = data.value.resources;
                                listVue.defaultCheckedKeys = data.value.resourceIds;
                                listVue.editResourceDialogVisible = true;
                            }
                        }
                    });
                },
                handleAdd: function () {
                    listVue.addForm = {roleName: ''};
                    listVue.addDialogVisible = true;
                },
                handleDel: function (id) {
                    listVue.delDialogVisible = true;
                    listVue.delId = id;
                },
                getCheckedKeys: function () {
                    return this.$refs.tree.getCheckedKeys();
                },
                setCheckedKeys: function (ids) {
                    this.$refs.tree.setCheckedKeys(ids);
                },
                resetChecked: function () {
                    this.$refs.tree.setCheckedKeys([]);
                },
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            },
            mounted: function (){
                this.initMenu();
            }

        });

        function search(pageNum) {
            var condition = {pageNum: listVue.pageNum};
            listVue.loading = true;
            $.ajax({
                cache: true,
                url: '/role/list?newDate='+Math.random(),
                type: 'POST',
                data: JSON.stringify(condition),
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    listVue.loading = false;
                    if (data.status == 1) {
                        var pageInfo = data.value;
                        listVue.tableData = pageInfo.list;
                        listVue.pageNum = pageInfo.pageNum;
                        listVue.total = pageInfo.total;
                        listVue.addHeight();
                    }
                }
            });

        }

        $(function () {
            listVue.initMenu();
            search(1);
            // changeFooterHeight();

        });

    </script>
</th:block>
</body>
</html>